<!DOCTYPE html>
<html id="main_html_root" lang="en">
  <head>
    <title>SuttaCentral</title>

    <meta charset="UTF-8" />

    <meta name="theme-color" content="#ce8400" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="SuttaCentral" />
    <meta name="msapplication-TileImage" content="/img/mstile-144x144.png" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-tap-highlight" content="no" />

    <!-- Search Engine -->
    <meta name="title" content="SuttaCentral" />
    <meta
      name="description"
      content="Early Buddhist texts from the Tipitaka (Tripitaka). Suttas (sutras) with the Buddha's teachings on mindfulness, insight, wisdom, and meditation."
    />
    <meta name="image" content="https://suttacentral.net/img/home-page/video_overlay.jpg" />
    <meta
      name="keywords"
      content="Buddha, Buddhism, Buddhist, sutta, suttas, sutra, sutras, tipitaka, tripitaka, wisdom, teaching, mindfulness, meditation, scripture, canon, Pali, Sanskrit, Tibetan, Chinese, insight, vipassana"
    />

    <!-- Schema.org for Google -->
    <meta itemprop="name" content="SuttaCentral" />
    <meta
      itemprop="description"
      content="Early Buddhist texts from the Tipitaka (Tripitaka). Suttas (sutras) with the Buddha's teachings on mindfulness, insight, wisdom, and meditation."
    />
    <meta itemprop="image" content="https://suttacentral.net/img/home-page/video_overlay.jpg" />
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="SuttaCentral" />
    <meta
      name="twitter:description"
      content="Early Buddhist texts from the Tipitaka (Tripitaka). Suttas (sutras) with the Buddha's teachings."
    />
    <meta name="twitter:image:alt" content="SuttaCentral" />

    <!-- Open Graph general (Facebook, Pinterest & Google+) -->
    <meta property="og:title" content="SuttaCentral" />
    <meta
      property="og:description"
      content="Early Buddhist texts from the Tipitaka (Tripitaka). Suttas (sutras) with the Buddha's teachings on mindfulness, insight, wisdom, and meditation."
    />
    <meta property="og:image" content="https://suttacentral.net/img/social_sharing.png" />
    <meta property="og:image:alt" content="SuttaCentral" />
    <meta property="og:url" content="https://suttacentral.net/" />
    <meta property="og:site_name" content="SuttaCentral" />
    <meta property="og:type" content="website" />

    <link rel="icon" href="/img/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="canonical" href="https://suttacentral.net/" />

    <style>
      :root {
        font-family: var(--sc-sans-font), 'Noto Sans', 'Source Sans Pro', sans-serif;
      }

      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        background-color: var(--sc-primary-background-color);
        color: var(--sc-primary-text-color);
        overflow-y: scroll;
        overflow-x: hidden;
      }

      .unsupported-browser-splash-screen {
        height: 100%;
        width: 100%;
        background-color: #f5f5f5;
        color: rgb(33, 33, 33);
        text-align: center;
        font-family: sans-serif;
      }

      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .margin-md {
        margin: 32px;
      }

      .hidden {
        display: none;
      }

      a {
        color: rgba(206, 132, 0, 1);
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: rgba(206, 132, 0, 1);
        font-family: 'Skolar Sans PE', 'Noto Sans', sans-serif;
        cursor: pointer;
        font-size: 16px;
      }

      button:hover {
        text-decoration: underline;
      }
    </style>
    <% if (htmlWebpackPlugin.options.isDevelopmentMode) { %>
      <script type="module" src="./elements/sc-site-layout.js"></script>
    <% } %>
  </head>
  <body>
    <sc-site-layout unresolved></sc-site-layout>

    <!-- Register pre-caching service worker -->
    <script async>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker
            .register('/sw-generated.js')
            .then(registration => {
              console.log('SW registered:', registration);
            })
            .catch(registrationError => {
              console.log(
                'The precaching service worker did not load correctly!' +
                  'Local resources will not be cached for offline use.' +
                  'Ignore this if you are running in development mode.',
                registrationError
              );
            });
        });
      }
    </script>

    <div class="unsupported-browser-splash-screen hidden">
      <div class="center">
        <div class="logo-image-container"></div>
        <h1>Oh no!</h1>
        <h3>It looks like you're using an unsupported browser.</h3>
        <h3>
          The site works well on modern versions of
          <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>
          ,
          <a href="https://www.google.com/chrome/">Chrome</a>
          ,
          <a href="https://www.microsoft.com/en-us/edge">Edge</a>
          ,
          <a href="https://www.opera.com/">Opera</a>
          , or
          <a href="https://www.apple.com/lae/safari/">Safari</a>
          .
        </h3>
        <h3>IE will not be supported.</h3>
        <hr />
        <div class="margin-md">
          <a href="https://legacy.suttacentral.net">
            Proceed to the legacy version of SuttaCentral
          </a>
        </div>
        <div class="margin-md">
          <button class="link" onclick="appendSiteContent()">
            Try using the modern version anyway
          </button>
        </div>
      </div>
    </div>

    <script defer>
      const isSupportedBrowser = function () {
        return window.CSS && CSS.supports('color', 'var(--primary)');
      };
      const showUnsupportedBrowserSplashScreen = function (shouldShow) {
        const unsupportedBrowserSplashScreen = document.querySelector(
                '.unsupported-browser-splash-screen'
        );
        if (shouldShow) {
          unsupportedBrowserSplashScreen.classList.remove('hidden');
        } else {
          unsupportedBrowserSplashScreen.classList.add('hidden');
        }
      };
      const appendSiteContent = function () {
        const mainElement = document.createElement('sc-site-layout');
        const body = document.querySelector('body');
        body.appendChild(mainElement);
        showUnsupportedBrowserSplashScreen(false);
      };
      const removeSiteContent = function () {
        const mainElement = document.querySelector('sc-site-layout');
        mainElement.parentNode.removeChild(mainElement);
      };
      if (!isSupportedBrowser()) {
        showUnsupportedBrowserSplashScreen(true);
        const logoImg = document.createElement('img');
        logoImg.src = 'img/android-chrome-192x192.png';
        document.querySelector('.logo-image-container').appendChild(logoImg);
        removeSiteContent();
      }
      document.addEventListener('metadata', function (e) {
        const metaData = e.detail;
        if (metaData) {
          const url = 'https://suttacentral.net' + window.location.pathname;
          document.head.querySelector('[rel=canonical]').href = url;
          document.head.querySelector('title').innerText = metaData.pageTitle;
          document.head.querySelector("[property='og:url']").content = url;
          document.head.querySelector("[property='og:title']").content = metaData.title;
          document.head.querySelector("[property='og:description']").content = metaData.description;
          document.head.querySelector("[property='og:type']").content = metaData.openGraphType
            ? metaData.openGraphType
            : 'website';
          document.head.querySelector("[name='title']").content = metaData.title;
          document.head.querySelector("[name='description']").content = metaData.description;
          document.head.querySelector("[name='twitter:title']").content = metaData.title;
          document.head.querySelector(
            "[name='twitter:description']"
          ).content = metaData.description.substring(0, 120);
          document.head.querySelector("[itemprop='name']").content = metaData.title;
          document.head.querySelector("[itemprop='description']").content = metaData.description;
        }
      });

      document.addEventListener('keyword-metadata', function (e) {
        const metaData = e.detail;
        if (metaData) {
          document.head.querySelector("[name='keywords']").content = metaData.keywords;
        }
      });

      window.addEventListener('beforeinstallprompt', function (e) {
        // Prevent Chrome 67 and earlier from automatically showing the prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        window.deferredPWAInstallPrompt = e;
      });
    </script>

    <noscript>Please enable JavaScript to view this website.</noscript>
  </body>
</html>
